<html lang="en">
<head>
    <%= require('./common/head.htm') %>
</head>
<body>
    <%= require('./common/header.htm') %>
    <div th:replace="common/top">
    </div>
    <div id="Content" ><!--style="display:none">-->
    
        <!-- <div>
            <div style="font-size: 20px;color: #eaac00;background-color: #ffffff;width: 99%">&nbsp;&nbsp;&nbsp;&nbsp;^&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div id="container">
                <div id="animate"></div>
            </div>
            <div style="float: left">&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div id="container2">
                <div id="animate2"></div>
            </div>
    
        </div> -->
        <!-- <script>
            $(document).ready(function () {
                $("#Welcome").slideDown(1000);
                $("#SidebarContent").slideDown(2900);
                $("#s1").fadeIn(2500);
                $("#s2").fadeIn(2700);
                $("#s3").fadeIn(2900);
                $("#s4").fadeIn(3100);
                $("#s5").fadeIn(3200);
                $("#MainImage").slideDown(3000);
            });
        </script> -->
    
        <!--<div style="display:none;" id="Welcome">--><div id="Welcome">
            <div id="WelcomeContent">
                <h3 style="color: #eaac00">&nbspWelcome to MyPetStore!</h3>
            </div>
        </div>
        <div style="float: left;width: auto;height: auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div id="Main">
            <div id="Sidebar" style="float: left">
                <div id="SidebarContent"><!--style="display:none">下面每个控件都有这句话-->
                    <a href="./catalog-list.html?id=Fish&route=product"   id="s1"><img src="<%= require('../images/fish_icon.gif') %>"/>
                    </a>
                    <br/>Saltwater, Freshwater <br/><br>
                    <a href="./catalog-list.html?id=Dogs&route=product"  id="s2"><img src="<%= require('../images/dogs_icon.gif') %>"/>
                    </a>
                    <br/>Various Breeds <br/><br>
                    <a href="./catalog-list.html?id=Cats&route=product"  id="s3"><img src="<%= require('../images/cats_icon.gif') %>"/>
                    </a>
                    <br/>Various Breeds, Exotic Varieties <br/><br>
                    <a href="./catalog-list.html?id=Reptiles&route=product"  id="s4"><img
                            src="<%= require('../images/reptiles_icon.gif') %>"/> </a>
                    <br/>Lizards, Turtles, Snakes <br/><br>
                    <a href="./catalog-list.html?id=BIRDS&route=product"  id="s5"><img
                            src="<%= require('../images/birds_icon.gif') %>"/> </a>
                    <br/>Exotic Varieties
                </div>
            </div>
            <div style="float: left;width: auto;height: auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <!--<div id="MainImage" style="display:none;float: left;width: auto;height: auto;">--><div id="MainImage">
                <div id="MainImageContent">
                    <map name="estoremap">
                        <area alt="Birds" style="cursor:url('../images/cursor2.png'),auto;" coords="72,2,280,250"
                              href="./catalog-list.html?id=BIRDS&route=product" shape="rect"/>
                              <!-- onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/> -->
                        <area alt="Fish" style="cursor:url('../images/cursor2.png'),auto;" coords="2,180,72,250"
                              href="./catalog-list.html?id=Fish&route=product" shape="rect"/>
                              <!-- onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/> -->
                        <area alt="Dogs" style="cursor:url('../images/cursor2.png'),auto;" coords="60,250,130,320"
                              href="./catalog-list.html?id=Dogs&route=product" shape="rect"/>
                              <!-- onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/> -->
                        <area alt="Reptiles" style="cursor:url('../images/cursor2.png'),auto;" coords="140,270,210,340"
                              href="./catalog-list.html?id=Reptiles&route=product" shape="rect"/>
                              <!-- onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/> -->
                        <area alt="Cats" style="cursor:url('../images/cursor2.png'),auto;" coords="225,240,295,310"
                              href="./catalog-list.html?id=Cats&route=product" shape="rect"/>
                              <!-- onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/> -->
                        <area alt="Birds" style="cursor:url('../images/cursor2.png'),auto;" coords="280,180,350,250"
                              href="./catalog-list.htmlid=BIRDS&route=product" shape="rect"/>
                              <!-- onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/> -->
                    </map>
                    <img height="355" src="<%= require('../images/splash.gif') %>" align="middle" usemap="#estoremap" width="350"/>
                </div>
            </div>
            <div id="inform" style="	display: none;float: left"></div>
            <!-- <script type="text/javascript" src="${pageContext.request.contextPath }/../js/mouseEvent.js"></script> -->
            <div id="Separator">&nbsp;</div>
        </div>
    </div>
    <div th:replace="common/bottom">
    </div>
    <%= require('./common/footer.htm') %>
</body>
</html>